<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>菜鸟先锋！</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="cai">
        <div class="row banxin">
            <div class="col-lg-7 nav_0">
                <ul class="row ul_0">
                    <li class="col-sm-1  col-lg-2">首页</li>
                    <li class="col-sm-1  col-lg-2">菜鸟工具</li>
                    <li class="col-sm-10 col-lg-2">菜鸟笔记</li>
                    <li class="col-sm-12 col-lg-2 visible-lg-block">参考手册</li>
                    <li class="col-sm-12 col-lg-2 visible-lg-block">用户笔记</li>
                    <li class="col-sm-12 col-lg-2 visible-lg-block">测验/考试</li>
                    <li class="col-sm-12 col-lg-2 visible-lg-block">本地书签</li>
                </ul>
            </div>
        </div>
        <div class="row banxin1">
            <div class="col-lg-1 col-lg-offset-1 visible-lg-block quan">
                <li>
                    <b class="glyphicon glyphicon-menu-hamburger"></b>
                    <span>全部教程</span>
                </li>
                <li>
                    <b class="glyphicon glyphicon-share"></b>
                    <span>HTML/CSS</span>
                </li>
                <li>
                    <b class="glyphicon glyphicon-share"></b>
                    <span>JavaScript</span>
                </li>
                <li>
                    <b class="glyphicon glyphicon-share"></b>
                    <span>服务端</span>
                </li>
                <li>
                    <b class="glyphicon glyphicon-share"></b>
                    <span>数据分析</span>
                </li>
                <li>
                    <b class="glyphicon glyphicon-share"></b>
                    <span>移动端</span>
                </li>
                <li>
                    <b class="glyphicon glyphicon-share"></b>
                    <span> XML 教程</span>
                </li>
                <li>
                    <b class="glyphicon glyphicon-share"></b>
                    <span>ASP.NET</span>
                </li>
                <li>
                    <b class="glyphicon glyphicon-share"></b>
                    <span>Web Service</span>
                </li>
                <li>
                    <b class="glyphicon glyphicon-share"></b>
                    <span>开发工具</span>
                </li>
                <li>
                    <b class="glyphicon glyphicon-share"></b>
                    <span>网站建设</span>
                </li>
            </div>
            <div class="col-lg-9 col-lg-offset-1 col-xs-10 you">
                <div class="col-lg-12 col-xs-12 tou_0">
                    <b class="glyphicon glyphicon-list"></b>
                    <span> HTML/CSS</span>
                </div>
                <!-- HTML -->
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 you-li">
                    <h4>【学习HTML/css】</h4>
                    <div class="bu">
                        <img src="./images/download (18).png" alt="">
                        <span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 you-li">
                    <h4>【学习 HTML5】</h4>
                    <div class="bu">
                        <img src="./images/download (11).png" alt="">
                        <span>HTML5 是下一代 HTML 标准</span>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 you-li">
                    <h4>【学习 CSS】</h4>
                    <div class="bu">
                        <img src="./images/download (15).png" alt="">
                        <span>层叠样式表（Cascading StyleSheet）</span>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 you-li">
                    <h4>【学习 CSS3】</h4>
                    <div class="bu">
                        <img src="./images/download (30).png" alt="">
                        <span>CSS3是CSS技术的升级版本</span>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 you-li">
                    <h4>【学习 Bootstrap3】</h4>
                    <div class="bu">
                        <img src="./images/download (23).png" alt="">
                        <span>Bootstrap，来自 Twitter，是目前最受欢迎的前端框架</span>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 you-li">
                    <h4>【学习 Bootstrap4】</h4>
                    <div class="bu">
                        <img src="./images/download (14).png" alt="">
                        <span>Bootstrap4 前端框架</span>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 you-li">
                    <h4>【学习 Bootstrap5】</h4>
                    <div class="bu">
                        <img src="./images/download (31).png" alt="">
                        <span>Bootstrap5 目前是 Bootstrap 的最新版本</span>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 you-li">
                    <h4>【学习 Font Awesome】</h4>
                    <div class="bu">
                        <img src="./images/download (9).png" alt="">
                        <span>Font Awesome 是一套绝佳的图标字体库和CSS框架。</span>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 you-li">
                    <h4>【学习 Foundation】</h4>
                    <div class="bu">
                        <img src="./images/download (19).png" alt="">
                        <span>Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架</span>
                    </div>
                </div>
                <!-- jacascript -->
                <div class="col-lg-12 col-xs-12 tou_0">
                    <b class="glyphicon glyphicon-list"></b>
                    <span>javaScript</span>
                </div>
                <div class="col-lg-4 col-md-6 col-xs-12 you-li">
                    <h4>【学习HTML/css】</h4>
                    <div class="bu">
                        <img src="./images/download (18).png" alt="">
                        <span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-xs-12 you-li">
                    <h4>【学习 HTML5】</h4>
                    <div class="bu">
                        <img src="./images/download (11).png" alt="">
                        <span>HTML5 是下一代 HTML 标准</span>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-xs-12 you-li">
                    <h4>【学习 javaScript】</h4>
                    <div class="bu">
                        <img src="./images/download (15).png" alt="">
                        <span>javaScript是web的编程语言</span>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-xs-12 you-li">
                    <h4>【学习 HTML DOM】</h4>
                    <div class="bu">
                        <img src="./images/download (18).png" alt="">
                        <span>HTML DOM 定义了访问和操作 HTML 文档的标准方法</span>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-xs-12 you-li">
                    <h4>【学习 jQuery】</h4>
                    <div class="bu">
                        <img src="./images/download (10).png" alt="">
                        <span>jQuery 是一个 JavaScript 库</span>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-xs-12 you-li">
                    <h4>【学习 AngularJS】</h4>
                    <div class="bu">
                        <img src="./images/download (16).png" alt="">
                        <span>AngularJS 通过新的属性和表达式扩展了 HTML</span>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-xs-12 you-li">
                    <h4>【学习 AngularJS2】</h4>
                    <div class="bu">
                        <img src="./images/download (21).png" alt="">
                        <span>AngularJS2 是一款开源JavaScript库，由Google维护。</span>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-xs-12 you-li">
                    <h4>【学习 Vue.js】</h4>
                    <div class="bu">
                        <img src="./images/download (32).png" alt="">
                        <span>Vue.js 是一套构建用户界面的渐进式框架。</span>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-xs-12 you-li">
                    <h4>【学习 Foundation】</h4>
                    <div class="bu">
                        <img src="./images/download (19).png" alt="">
                        <span>download (32).png</span>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-xs-12 you-li">
                    <h4>【学习 HTML DOM】</h4>
                    <div class="bu">
                        <img src="./images/download (18).png" alt="">
                        <span>HTML DOM 定义了访问和操作 HTML 文档的标准方法</span>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-xs-12 you-li">
                    <h4>【学习 jQuery】</h4>
                    <div class="bu">
                        <img src="./images/download (10).png" alt="">
                        <span>jQuery 是一个 JavaScript 库</span>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-xs-12 you-li">
                    <h4>【学习 AngularJS】</h4>
                    <div class="bu">
                        <img src="./images/download (16).png" alt="">
                        <span>AngularJS 通过新的属性和表达式扩展了 HTML</span>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-xs-12 you-li">
                    <h4>【学习 AngularJS2】</h4>
                    <div class="bu">
                        <img src="./images/download (21).png" alt="">
                        <span>AngularJS2 是一款开源JavaScript库，由Google维护。</span>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-xs-12 you-li">
                    <h4>【学习 Vue.js】</h4>
                    <div class="bu">
                        <img src="./images/download (32).png" alt="">
                        <span>Vue.js 是一套构建用户界面的渐进式框架。</span>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-xs-12 you-li">
                    <h4>【学习 Foundation】</h4>
                    <div class="bu">
                        <img src="./images/download (19).png" alt="">
                        <span>download (32).png</span>
                    </div>
                </div>
                <!-- 服务端 -->
                <div class="col-lg-12 col-xs-12 tou_0">
                    <b class="glyphicon glyphicon-list"></b>
                    <span>服务端</span>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 you-li">
                    <h4>【学习 Python】</h4>
                    <div class="bu">
                        <img src="./images/download (22).png" alt="">
                        <span>Python3.x 版本，未来主流版本。</span>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 you-li">
                    <h4>【学习 Python2.x】</h4>
                    <div class="bu">
                        <img src="./images/download (11).png" alt="">
                        <span>Python 是一种面向对象、解释型计算机程序设计语言</span>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 you-li">
                    <h4>【学习 Linux】</h4>
                    <div class="bu">
                        <img src="./images/download (15).png" alt="">
                        <span>Linux是一套免费使用和自由传播的类Unix操作系统</span>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 you-li">
                    <h4>【学习 Docker】</h4>
                    <div class="bu">
                        <img src="./images/download (30).png" alt="">
                        <span>Docker 是一个开源的应用容器引擎，基于 Go 语言</span>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 you-li">
                    <h4>【学习 Ruby】</h4>
                    <div class="bu">
                        <img src="./images/download (23).png" alt="">
                        <span>一种为简单快捷的面向对象编程（面向对象程序设计）而创的脚本语言</span>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 you-li">
                    <h4>【学习 Java】</h4>
                    <div class="bu">
                        <img src="./images/download (14).png" alt="">
                        <span>一种可以撰写跨平台应用软件的面向对象的程序设计语言</span>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 you-li">
                    <h4>【学习 C】</h4>
                    <div class="bu">
                        <img src="./images/download (31).png" alt="">
                        <span>一门通用计算机编程语言</span>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 you-li">
                    <h4>【学习 C++】</h4>
                    <div class="bu">
                        <img src="./images/download (9).png" alt="">
                        <span>C++是在C语言的基础上开发的一种通用编程语言</span>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 you-li">
                    <h4>【学习 Perl】</h4>
                    <div class="bu">
                        <img src="./images/download (19).png" alt="">
                        <span>Perl 是高级、通用、直译式、动态的程序语言</span>
                    </div>
                </div>
                <!-- XML教程 -->
                <!-- XML教程 -->
                <div class="col-lg-12 col-xs-12 tou_0">
                    <b class="glyphicon glyphicon-list"></b>
                    <span>XML教程</span>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 you-li">
                    <h4>【学习 XML】</h4>
                    <div class="bu">
                        <img src="./images/download (22).png" alt="">
                        <span>Python3.x 版本，未来主流版本。</span>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 you-li">
                    <h4>【学习 DTD】</h4>
                    <div class="bu">
                        <img src="./images/download (11).png" alt="">
                        <span>Python 是一种面向对象、解释型计算机程序设计语言</span>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 you-li">
                    <h4>【学习 XML DOM】</h4>
                    <div class="bu">
                        <img src="./images/download (15).png" alt="">
                        <span>Linux是一套免费使用和自由传播的类Unix操作系统</span>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 you-li">
                    <h4>【学习 XSLT】</h4>
                    <div class="bu">
                        <img src="./images/download (30).png" alt="">
                        <span>Docker 是一个开源的应用容器引擎，基于 Go 语言</span>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 you-li">
                    <h4>【学习 XPath】</h4>
                    <div class="bu">
                        <img src="./images/download (23).png" alt="">
                        <span>一种为简单快捷的面向对象编程（面向对象程序设计）而创的脚本语言</span>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 you-li">
                    <h4>【学习 XQuery】</h4>
                    <div class="bu">
                        <img src="./images/download (14).png" alt="">
                        <span>一种可以撰写跨平台应用软件的面向对象的程序设计语言</span>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 you-li">
                    <h4>【学习 XLink】</h4>
                    <div class="bu">
                        <img src="./images/download (31).png" alt="">
                        <span>一门通用计算机编程语言</span>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 you-li">
                    <h4>【学习 C++】</h4>
                    <div class="bu">
                        <img src="./images/download (9).png" alt="">
                        <span>C++是在C语言的基础上开发的一种通用编程语言</span>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 you-li">
                    <h4>【学习 SVG】</h4>
                    <div class="bu">
                        <img src="./images/download (19).png" alt="">
                        <span>Perl 是高级、通用、直译式、动态的程序语言</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row banxin2 visible-lg-block">
            <div class="col-lg-12 col-lg-2 visible-lg-block banxin2-top">
                <ul>
                    <h5>在线实例</h5>
                    <li>HTML实例</li>
                    <li>css</li>
                    <li>JavaScript实例</li>
                    <li>Ajax实例</li>
                    <li>JQuery实例</li>
                    <li>XML实例</li>
                    <li>Java实例</li>
                </ul>
                <ul>
                    <h5>字符集&工具</h5>
                    <li>HTML字符集设置</li>
                    <li>HTML ASCll 字符集</li>
                    <li>JS hunyao</li>
                    <li>Ajax实例</li>
                    <li>JQuery实例</li>
                    <li>XML实例</li>
                    <li>Java实例</li>
                </ul>
                <ul>
                    <h5>最新更新</h5>
                    <li>HTML实例</li>
                    <li>css</li>
                    <li>JavaScript实例</li>
                    <li>Ajax实例</li>
                    <li>JQuery实例</li>
                    <li>XML实例</li>
                    <li>Java实例</li>
                </ul>
                <ul>
                    <h5>站点信息</h5>
                    <li>意见反馈</li>
                    <li>免责声明</li>
                    <li>关于我们</li>
                    <li>文章归档</li>
                </ul>
                <ul>
                    <h4>关注微信</h4>
                    <img src="./images/qrcode.png" alt="">
                </ul>
            </div>
        </div>
    </div>
    <!-- jQuery  -->
    <script src="https://cdn.jsdelivr.cn/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap  -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>

</html>